<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content"><text>我的收益</text></block>
		</cu-custom>
		
		<view class="whole-box">
			<view class="gold-black-box">
				
				<view class="top-box">
					<image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
					<view class="top-box-content">
						<image class="avatar" :src="member && member.head_portrait ? member. head_portrait : '../../static/default-avatar.png'" mode="aspectFill"></image>
						<text class="username">{{member && member.nickname ? member.nickname :(member && member.username? member.username:'')}}</text>
						<view class="data-box">
							<view>今日收益:<text>{{statistics && statistics.dayprofit > 0 ? statistics.dayprofit : 0}}</text></view>
							<view>昨日收益:<text>{{statistics && statistics.yesprofit > 0 ? statistics.yesprofit : 0}}</text></view>
							<view>累积收益:<text>{{statistics && statistics.profit > 0 ? statistics.profit : 0}}</text></view>
						</view>
					</view>
					<image class="bg-logo" src="@/static/black_bg/bg-logo.png"></image>
					<view class="level-detail" v-if="member && member.level">
						<image src="@/static/icon-level.png"></image>
						<text>{{member.level.name}}</text>
					</view>
				</view>
				
				<view class="my-data-box">
					<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
					<view class="my-data-box-content">
						<view class="note-num-box">
							<view class="line">
								<view class="note-num">
									<text class="note">我的余额(元)</text>
									<text class="num">{{statistics && statistics.acc.user_money > 0 ? statistics.acc.user_money : 0}}</text>
								</view>
								<!-- <view class="note-num">
									<text class="note">我的余额(元)</text>
									<text class="num">888</text>
								</view> -->
							</view>
							<view class="line">
								<view class="note-num">
									<text class="note">累计充值(元)</text>
									<text class="num">{{statistics && statistics.recharge > 0 ? statistics.recharge : 0}}</text>
								</view>
								<view class="note-num">
									<text class="note">余额累计消费(元)</text>
									<text class="num">{{statistics && statistics.consum > 0 ? statistics.consum : 0}}</text>
								</view>
							</view>
						</view>
						
						<view class="action-list">
							<text @tap="goPage('/pages/member/recharge/index')">充值</text>
							<text @tap="goPage('/pages/member/withdraw/apply')">提现</text>
							<text @tap="goPage('/pages/income/balance_change')">互转</text>
							<text @tap="goPage('/pages/member/recharge/log')">查看记录</text>
						</view>
					</view>
				</view>
				
				<view class="my-data-box">
					<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
					<view class="my-data-box-content">
						<view class="note-num-box">
							<view class="line">
								<view class="note-num">
									<text class="note">我的积分</text>
									<text class="num">{{statistics && statistics.acc.user_integral > 0 ? statistics.acc.user_integral : 0}}</text>
								</view>
								<!-- <view class="note-num">
									<text class="note">我的余额(元)</text>
									<text class="num">888</text>
								</view> -->
							</view>
							<view class="line">
								<view class="note-num">
									<text class="note">昨日收益</text>
									<text class="num">{{statistics && statistics.int_yesprofit > 0 ? statistics.int_yesprofit : 0}}</text>
								</view>
								<view class="note-num">
									<text class="note">累计收益</text>
									<text class="num">{{statistics && statistics.int_profit > 0 ? statistics.int_profit : 0}}</text>
								</view>
							</view>
						</view>
						
						<view class="action-list">
							<!-- <text>立即提现</text> -->
							<text v-if="member && member.level && member.level.level > 1" @tap="goPage('/pages/member/team/index')">查看团队</text>
							<text @tap="goPage('/pages/member/withdraw/apply?type=integral')">提现</text>
							<text @tap="goPage('/pages/income/balance_integral')">互转</text>
							<text @tap="goPage('/pages/member/interval/index')">查看记录</text>
						</view>
					</view>
				</view>
				
				<view class="my-data-box">
					<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
					<view class="my-data-box-content">
						<view class="note-num-box">
							<view class="line">
								<view class="note-num">
									<text class="note">熊宝宝</text>
									<text class="num">{{statistics && statistics.acc.money_coupon > 0 ? statistics.acc.money_coupon : 0}}</text>
								</view>
								<!-- <view class="note-num">
									<text class="note">开团券</text>
									<text class="num">888</text>
								</view> -->
							</view>
							<view class="line">
								<view class="note-num">
									<text class="note">秒杀券</text>
									<text class="num">{{statistics && statistics.acc.wholesale_coupon > 0 ? statistics.acc.wholesale_coupon : 0}}</text>
								</view>
								<view class="note-num">
									<text class="note">有拼金币</text>
									<text class="num">{{statistics && statistics.acc.gold > 0 ? statistics.acc.gold : 0}}</text>
								</view>
							</view>
						</view>
						
						<view class="action-list">
							<text @tap="goPage('/pages/income/integral_recharge')">熊宝宝兑换</text>
							<text @tap="goPage('/pages/income/coupon_moneylist')">熊宝宝记录</text>
							<text @tap="goPage('/pages/member/group_buy/coupon1')">秒杀券记录</text>
							
							<text @tap="goPage('/pages/member/group_buy/index')">参团记录</text>
						</view>
					</view>
				</view>
				
				<!-- <view class="my-data-box">
					<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
					<view class="my-data-box-content">
						<view class="note-num-box">
							<view class="line">
								<view class="note-num">
									<text class="note">累积区域奖励</text>
									<text class="num">888</text>
								</view>
								<view class="note-num">
									<text class="note">我的余额(元)</text>
									<text class="num">888</text>
								</view>
							</view>
							<view class="line">
								<view class="note-num">
									<text class="note">本日收益</text>
									<text class="num">888</text>
								</view>
								<view class="note-num">
									<text class="note">昨日收益</text>
									<text class="num">888</text>
								</view>
							</view>
						</view>
						
						<view class="action-list">
							<text>区域订单</text>
							<text>区域会员</text>
							<text>立即提现</text>
						</view>
					</view>
				</view> -->
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				statistics: null,
				member:null,
			}
		},
		onLoad() {
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				// this.$nextTick((r) => {
				// 	uni.startPullDownRefresh({})
				// })
				this.$common.getMember().then((member)=>{
					this.member = member
					this.getTotal();
				})
			}
		},
		methods: {
			getTotal() {
				this.$http
					.get('data_home', {})
					.then((response) => {
						this.statistics = response.data.data
					})
					.catch((response) => {
						console.log(response)
					})
			},
			onPullDownRefresh() {
				this.$common.rmCache('member')
				if (this.hasLogin) {
					this.$common.getMember().then((member) => {
						this.member = member
						this.getTotal();
						this.$nextTick(function() {
							uni.stopPullDownRefresh()
						})
					})
				} else {
					uni.stopPullDownRefresh()
				}
			},
		},
	}
</script>


<style>
	.whole-box{
		background-color: #333333;
		min-height: calc(100vh - 45px - 50rpx);
		padding: 25rpx 0;
	}
	.gold-black-box{
		padding: 25rpx 0;
		margin: 0 10rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 276rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		height: 276rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-box-content .avatar{
		margin-top: 26rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
	}
	.top-box-content .username{
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #E5D4B9;
	}
	.top-box-content .data-box{
		width: 100%;
		margin-top: 28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.data-box view{
		font-size: 28rpx;
		font-weight: bold;
		color: #E5D4B9;;
	}
	.data-box view text{
		margin-left: 10rpx;
	}
	
	.top-box .bg-logo{
		width: 196rpx;
		height: 54rpx;
		position: absolute;
		top: 26rpx;
		left: 20rpx;
	}
	
	.top-box .level-detail{
		position: absolute;
		top: 26rpx;
		left: 400rpx;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000000;
	}
	.level-detail image{
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
		flex-shrink: 0;
	}
	.level-detail text{
		font-size: 28rpx;
		font-weight: bold;
		color: #E5D4B9;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 25rpx;
		width: 690rpx;
		height: 336rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		height: 336rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
	}
	
	.my-data-box-content .note-num-box{
		flex: 1;
	}
	.note-num-box .line{
		margin-top: 90rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.note-num-box .line:first-child{
		margin-top: 0;
	}
	.line .note-num{
		width: 50% 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.note-num .note{
		font-size: 24rpx;
		color: #E5D4B9;
	}
	.note-num .num{
		margin-top: 6rpx;
		font-size:42rpx;
		font-weight: bold;
		color: #E5D4B9;
	}
	.my-data-box-content .action-list{
		width: 150rpx;
		margin-left: 100rpx;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.action-list text{
		margin-top: 6rpx;
		width: 150rpx;
		height: 54rpx;
		background-color: #E5D4B9;
		text-align: center;
		line-height: 54rpx;
		border-radius: 27rpx;
		font-size: 26rpx;
		color: #3C3A3A;
	}
	.action-list text:first-child{
		margin-top: 0;
	}
</style>